<template>
  <div>
    <div class="dt_head">
      <Button size="large" icon="md-brush" type="success">写一条</Button>
      <Button size="large" icon="md-star" type="success">收藏到我的</Button>
      <Button size="large" icon="md-arrow-round-forward" type="success">下一条</Button>
    </div>

    <div class="dt_body">
      <Carousel v-model="target" :loop="false" arrow="hover" dots="outside">
        <CarouselItem>
          <div class="dt_item">
            <img class="imgs"
                 src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/00/07/ChMkJl3qNKaIDNA2AARqqK0FxbEAAvnJAJbLQMABGrA592.jpg"/>
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="dt_item">
            <img class="imgs"
                 src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/09/ChMkJl3c-fyIbSzZAAJSAEMEXbIAAvbpwIX8sYAAlIY128.jpg"/>
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="dt_item">
            <img class="imgs"
                 src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/09/ChMkJ13c-dqIQX4RAAqVTD7Dl2sAAvbpgAd0x8ACpVk110.jpg"/>
          </div>
        </CarouselItem>
      </Carousel>
    </div>

    <div class="dt_info">
      <List>
        <ListItem>
          <ListItemMeta avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar"
                        title="挽梦"
                        description="分享一组图片"/>
          <template slot="action">
            <li @click="add">
              <Icon :size="24" :color="isAdd?'red':'blue'" :type="isAdd?'ios-thumbs-up':'ios-thumbs-up-outline'"/>
              <span style="color: black">123</span>
            </li>
            <li @click="less">
              <Icon :size="24" :color="isLess?'red':'black'" :type="isLess?'ios-thumbs-down':'ios-thumbs-down-outline'"/>
              <span style="color: black">123</span>
            </li>
            <li @click="talk">
              <Icon :size="24" color="red" type="ios-text-outline"/>
              <span style="color: red">123</span>
            </li>
          </template>
        </ListItem>
      </List>
    </div>
    <Modal v-model="show_talk" fullscreen title="Fullscreen Modal">
      <div>This is a fullscreen modal</div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "dt_index",
    data: () => ({
      target: 0,
      show_talk: false,
      isAdd: false,
      isLess: false
    }),
    methods: {
      talk() {
        this.show_talk = true
      },
      add() {
        this.isAdd = !this.isAdd;
        this.isLess = false;
      },
      less() {
        this.isLess = !this.isLess;
        this.isAdd = false;
      }
    }
  }
</script>

<style scoped>
  .dt_body {
    width: 90%;
    height: 550px;
    margin: 30px auto;
  }

  .dt_item {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle
  }

  .dt_info {
    width: 90%;
    margin: 50px auto;
  }

  .imgs {
    max-width: 100%;
    max-height: 550px;
  }

  .dt_head {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
</style>
